<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>列表页</title>
    <style>
      ul,
      li,
      p {
        padding: 0;
        margin: 0;
      }
      img {
        display: block;
        border: none;
      }
      #prodList li {
        list-style: none;
        float: left;
        margin: 10px;
        width: 220px;
        padding: 10px;
        border: 1px solid #cecece;
      }
      #prodList li p {
        margin: 10px 0;
      }
      #prodList li input {
        border: none;
        width: 120px;
        height: 40px;
        background-color: red;
        color: white;
      }
    </style>
  </head>
  <body>
    <div>
      <ul id="prodList"></ul>
    </div>
    <script src="cart.js"></script>
    <script>
      /* let data = { a: 1, b: 2 };
      localStorage.setItem("username", "duanfanchao");
      localStorage.setItem("data", JSON.stringify(data));
      console.log(JSON.parse(localStorage.getItem("data")));
      localStorage.removeItem("username"); */

      /* let productDatas = {
        "10001": {
          id: 10001,
          title: "商品1",
          price: 100,
          imgsrc: "img/1.jpg",
        },
        "10002": {
          id: 10002,
          title: "商品2",
          price: 200,
          imgsrc: "img/2.jpg",
        },
        "10003": {
          id: 10003,
          title: "商品3",
          price: 300,
          imgsrc: "img/3.jpg",
        },
      };
      localStorage.setItem("prodDatas", JSON.stringify(productDatas)); */
      let oUl = document.getElementById("prodList");
      let prodDatas = JSON.parse(localStorage.getItem("prodDatas"));
      let str = "";
      for (let id in prodDatas) {
        str += ` <li>
         <a href="detail.html?id=${id}"> <img src="${prodDatas[id].imgsrc}" /></a>
          <p>${prodDatas[id].title}</p>
          <p>${prodDatas[id].price}</p>
          <input type="button" class="addBtn" value="加入购物车" data-id="${id}" />
        </li>`;
      }
      oUl.innerHTML = str;

      let cart = new Cart();

      let addBtns = document.querySelectorAll(".addBtn");
      for (let i = 0; i < addBtns.length; i++) {
        addBtns[i].onclick = function () {
          let id = this.getAttribute("data-id");
          cart.saveData(id, 1, false);
        };
      }
    </script>
  </body>
</html>
